<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        #id {
            position: relative;
        }

        .d1 {
            margin-top: 15px;
            margin-bottom: 15px;
            height: 30px;
        }

        img {
            position: absolute;
            top: 20px;
        }

        .s1 {
            position: absolute;
            top: 17px;
            left: 30px;
            font-size: 18px;
            padding-left: 5px;
        }

        .b1 {
            position: absolute;
            border: 1px #dcdfe6 solid;
            top: 10px;
            right: 120px;
            padding: 7px 18px;
            font-size: 14px;
            border-radius: 5px;
            background-color: #fff;
        }

        .b2 {
            position: absolute;
            border: 1px #dcdfe6 solid;
            top: 10px;
            right: 20px;
            padding: 7px 18px;
            font-size: 14px;
            border-radius: 5px;
            background-color: #fff;
        }

        .el-dropdown {
            vertical-align: top;
        }

        .el-dropdown+.el-dropdown {
            margin-left: 15px;
        }

        .el-icon-arrow-down {
            font-size: 12px;
        }

        .block {
            position: absolute;
            top: 440px;
            right: 0px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="d1">
            <img src="文件-名册.png" width="20" height="20">
            <span class="s1">党员名册</span>
            <button class="b1">新增</button>
            <button class="b2">批量导入</button>
        </div>
        <template>
            <el-table :data="tableData" border style="width: 100%" :header-cell-style="
            {
                background:'#f5f7fa',
            }">
                <el-table-column prop="num" label="序号" width="40" align="center">
                </el-table-column>
                <el-table-column prop="branch" label="所在支部" width="120" align="center">
                </el-table-column>
                <el-table-column prop="name" label="姓名" width="50" align="center">
                </el-table-column>
                <el-table-column prop="senum" label="员工编号" width="120" align="center">
                </el-table-column>
                <el-table-column prop="id" label="身份证号" width="150" align="center">
                </el-table-column>
                <el-table-column prop="sex" label="性别" width="50" align="center">
                </el-table-column>
                <el-table-column prop="date" label="出生日期" width="80" align="center">
                </el-table-column>
                <el-table-column prop="edu" label="学历" width="60" align="center">
                </el-table-column>
                <el-table-column prop="hde" label="最高学位" width="60" align="center">
                </el-table-column>
                <el-table-column prop="nation" label="民族" width="40" align="center">
                </el-table-column>
                <el-table-column prop="native" label="籍贯" width="80" align="center">
                </el-table-column>
                <el-table-column prop="tel" label="手机" width="120" align="center">
                </el-table-column>
                <el-table-column prop="email" label="邮箱" width="120" align="center">
                </el-table-column>
                <el-table-column prop="work" label="工作单位" width="120" align="center">
                </el-table-column>
                <el-table-column prop="home" label="家庭住址" width="120" align="center">
                </el-table-column>
                <el-table-column prop="type" label="人员类别" width="80" align="center">
                </el-table-column>
                <el-table-column prop="date1" label="加入党组织日期" width="80" align="center">
                </el-table-column>
                <el-table-column prop="date2" label="转正日期" width="80" align="center">
                </el-table-column>
                <el-table-column prop="person" label="人员身份" width="80" align="center">
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="100" align="center">
                    <template slot-scope="scope">
                        <el-button @click="dialog = true" type="text" size="small">查看</el-button>
                        <el-button @click="dialog = true" type="text" size="small">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-drawer title="党员名册表" :before-close="handleClose" :visible.sync="dialog" direction="ttb"
                custom-class="demo-drawer" ref="drawer" style="width: 600px;margin: auto;font-size: 18px;" size="80%">
                <div class="demo-drawer__content">
                    <el-form ref="form" :model="form" label-width="120px">
                        <div>
                            <p class="p1">基础信息：</p>
                            <el-form-item label="所在支部">
                                <el-input v-model="form.branch"></el-input>
                            </el-form-item>
                        </div>
                        <div>
                            <p class="p1">人员信息：</p>
                            <el-form-item label="姓名">
                                <el-input v-model="form.name" placeholder="请输入姓名"></el-input>
                            </el-form-item>
                            <el-form-item label="员工编号">
                                <el-input v-model="form.num" placeholder="请输入编号"></el-input>
                            </el-form-item>
                            <el-form-item label="身份证号">
                                <el-input v-model="form.id" placeholder="请输入身份证号"></el-input>
                            </el-form-item>
                            <el-form-item label="性别">
                                <el-radio-group v-model="form.sex">
                                    <el-radio label="男"></el-radio>
                                    <el-radio label="女"></el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="出生日期">
                                <el-col :span="11">
                                    <el-date-picker type="date" placeholder="选择日期" v-model="form.date1"
                                        style="width: 100%;"></el-date-picker>
                                </el-col>
                            </el-form-item>
                            <el-form-item label="学历">
                                <el-input v-model="form.edu" placeholder="请输入学历"></el-input>
                            </el-form-item>
                            <el-form-item label="最高学位">
                                <el-input v-model="form.hde" placeholder="请输入最高学位"></el-input>
                            </el-form-item>
                            <el-form-item label="民族">
                                <el-input v-model="form.nation" placeholder="请输入籍贯"></el-input>
                            </el-form-item>
                            <el-form-item label="籍贯">
                                <el-input v-model="form.native" placeholder="请输入籍贯"></el-input>
                            </el-form-item>
                            <el-form-item label="手机">
                                <el-input v-model="form.tel" placeholder="请输入手机号码"></el-input>
                            </el-form-item>
                            <el-form-item label="邮箱">
                                <el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
                            </el-form-item>
                            <el-form-item label="工作单位">
                                <el-input v-model="form.work" placeholder="请输入工作单位"></el-input>
                            </el-form-item>
                            <el-form-item label="家庭住址">
                                <el-input v-model="form.home" placeholder="请输入家庭住址"></el-input>
                            </el-form-item>
                            <el-form-item label="人员类别">
                                <el-select v-model="form.type" placeholder="请选择人员类别">
                                    <el-option label="正式党员" value="zsdy"></el-option>
                                    <el-option label="预备党员" value="ybdy"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="加入党组织日期">
                                <el-col :span="11">
                                    <el-date-picker type="date" placeholder="选择日期" v-model="form.date2"
                                        style="width: 100%;"></el-date-picker>
                                </el-col>
                            </el-form-item>
                            <el-form-item label="转正日期">
                                <el-col :span="11">
                                    <el-date-picker type="date" placeholder="选择日期" v-model="form.date3"
                                        style="width: 100%;"></el-date-picker>
                                </el-col>
                            </el-form-item>
                            <el-form-item label="人员身份">
                                <el-select v-model="form.person" placeholder="请选择人员身份">
                                    <el-option label="生产操作" value="sccz"></el-option>
                                    <el-option label="技术人员" value="jsry"></el-option>
                                    <el-option label="管理人员" value="glry"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="onSubmit">取消</el-button>
                                <el-button>确定</el-button>
                            </el-form-item>
                        </div>
                    </el-form>
                </div>
            </el-drawer>

            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage4" :page-sizes="[5, 10, 20, 30]" :page-size="10"
                    layout="total, sizes, prev, pager, next, jumper" :total="50">
                </el-pagination>
            </div>
        </template>
    </div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    var Main = {
        methods: {
            handleClick(row) {
                console.log(row);
            },
            handleClose(done) {
                if (this.loading) {
                    return;
                }
                this.$confirm('确定要提交表单吗？')
                    .then(_ => {
                        this.loading = true;
                        this.timer = setTimeout(() => {
                            done();
                            // 动画关闭需要一定的时间
                            setTimeout(() => {
                                this.loading = false;
                            }, 400);
                        }, 2000);
                    })
                    .catch(_ => { });
            },
            cancelForm() {
                this.loading = false;
                this.dialog = false;
                clearTimeout(this.timer);
            }
        },

        data() {
            return {
                tableData: [{
                    num: 1,
                    branch: '第四作业区榆二联党支部',
                    name: '王敏',
                    senum: '1102',
                    id: '510231',
                    sex: '女',
                    date: '2002-6-2',
                    edu: '大学',
                    hde: '大学',
                    nation: '汉',
                    native: '四川成都',
                    tel: '13162587789',
                    email: 'lll@cn',
                    work: '无',
                    home: '上海市普陀区金沙江路1518弄',
                    type: '正式党员',
                    date1: '1998-02-25',
                    date2: '1999-02-25',
                    person: '生产操作',
                }, {
                    num: 2,
                    branch: '第四作业区榆二联党支部',
                    name: '王敏',
                    senum: '1102',
                    id: '510231',
                    sex: '女',
                    date: '2002-6-2',
                    edu: '大学',
                    hde: '大学',
                    nation: '汉',
                    native: '四川成都',
                    tel: '13162587789',
                    email: 'lll@cn',
                    work: '无',
                    home: '上海市普陀区金沙江路1518弄',
                    type: '正式党员',
                    date1: '1998-02-25',
                    date2: '1999-02-25',
                    person: '生产操作',
                }, {
                    num: 3,
                    branch: '第四作业区榆二联党支部',
                    name: '王敏',
                    senum: '1102',
                    id: '510231',
                    sex: '女',
                    date: '2002-6-2',
                    edu: '大学',
                    hde: '大学',
                    nation: '汉',
                    native: '四川成都',
                    tel: '13162587789',
                    email: 'lll@cn',
                    work: '无',
                    home: '上海市普陀区金沙江路1518弄',
                    type: '正式党员',
                    date1: '1998-02-25',
                    date2: '1999-02-25',
                    person: '生产操作',
                }, {
                    num: 4,
                    branch: '第四作业区榆二联党支部',
                    name: '王敏',
                    senum: '1102',
                    id: '510231',
                    sex: '女',
                    date: '2002-6-2',
                    edu: '大学',
                    hde: '大学',
                    nation: '汉',
                    native: '四川成都',
                    tel: '13162587789',
                    email: 'lll@cn',
                    work: '无',
                    home: '上海市普陀区金沙江路1518弄',
                    type: '正式党员',
                    date1: '1998-02-25',
                    date2: '1999-02-25',
                    person: '生产操作',
                }],
                table: false,
                dialog: false,
                loading: false,
                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                },
                formLabelWidth: '80px',
                timer: null,
            }
        }
    }
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')
</script>

</html>